<template>
  <div class="app">
    <router-view v-slot="{ Component }">
      <transition :name="animation">
        <keep-alive
          exclude="FoodDetail,SearchFood,EditAddressInfo,Login,ShopCart,User,UserInfo"
        >
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
  <!-- 底部弹出框 -->
  <action-sheet v-if="$store.state.actionSheetConfig.isShow"></action-sheet>
</template>

<script>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import ActionSheet from "./components/ActionSheet.vue";
export default {
  components: { ActionSheet },
  name: "App",
  setup(props, context) {
    const route = useRoute();
    const animation = ref("slide");
    let routeIndex = route.meta.index;
    //监听各路由的meta值判断动画方向
    watch(route, () => {
      animation.value =
        route.meta.index > routeIndex ? "slide-left" : "slide-right";
      routeIndex = route.meta.index;
    });
    //阻止右键默认行为
    document.addEventListener("contextmenu", function (e) {
      e.preventDefault();
    });
    return {
      animation,
    };
  },
};
</script>

<style lang="scss">
.app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
//两组动画
//向左滑动
.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-enter-to,
.slide-left-leave-from,
.slide-left-leave-to,
.slide-right-enter-to,
.slide-right-leave-from,
.slide-right-leave-to {
  transform: translateX(0);
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s linear;
}
//向右滑动
.slide-right-enter-from {
  transform: translateX(-100%);
}
</style>
